/** @format */

import { useState, useEffect } from "react";
import { Tabs, Input } from "antd";
import { List } from "../../utils/index";
import Listdata from "../../components/Listdata";

const { TabPane } = Tabs;
const { Search } = Input;

export default function Home() {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(false);
  const [params, setParams] = useState({
    page: 1,
    pageSize: 6,
    tag: null,
    keyword: null,
  });

  const fetchData = async () => {
    setLoading(true);
    try {
      console.log(params);
      const res = await List(params);
      console.log(res);
      setData(res);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [params]);

  // const handleSearch = (value) => {
  //   setParams((prev) => ({ ...prev, keyword: value, page: 1 }));
  // };

  const handleTabChange = (tag) => {
    // tag = tag === "null" ? null : tag;
    // console.log(typeof tag);
    // setParams((prev) => ({ ...prev, tag, page: 1 }));
    tag = tag === "null" ? null : tag;
    setParams((prev) => ({ ...prev, tag }));
  };

  return (
    <div className="home-page">
      <div className="search-section">
        <Tabs
          defaultActiveKey=""
          onChange={handleTabChange}
          items={[
            {
              label: "全部",
              key: null,
            },
            {
              label: "Node",
              key: "Node",
            },
            {
              label: "HTTP",
              key: "HTTP",
            },
          ]}
        />
        <Search
          placeholder="搜索文章"
          allowClear
          // onSearch={handleSearch}
          style={{ width: 300 }}
        />
      </div>
      <Listdata
        data={data}
        loading={loading}
        // onPageChange={(page) => setParams((prev) => ({ ...prev, page }))}
        // current={params.page}
      />
    </div>
  );
}
